<template>
  <div class="view-header">
    <ul class="view-header-l-tool">
      <li
        :class="layout.showComponent ? 'action' : ''"
        @click="changeComponent"
      >
        <a-tooltip placement="topLeft">
          <template #title>
            <span>组件</span>
          </template>
          <i><ClusterOutlined /></i>组件
        </a-tooltip>
      </li>
      <li :class="layout.showLayer ? 'action' : ''" @click="changeLayer">
        <a-tooltip placement="topLeft">
          <template #title>
            <span>图层</span>
          </template>
          <i><InsertRowLeftOutlined /></i>图层
        </a-tooltip>
      </li>
    </ul>
    <ul class="view-header-r-tool">
      <li @click="save">
        <a-tooltip placement="topLeft">
          <template #title>
            <span>保存</span>
          </template>
          <i><SaveOutlined /></i> 保存
        </a-tooltip>
      </li>
      <li @click="getJSON">
        <a-tooltip placement="topLeft">
          <template #title>
            <span>获取JSON</span>
          </template>
          <i><CodepenOutlined /></i> 获取JSON
        </a-tooltip>
      </li>
      <li @click="downloadCode">
        <a-tooltip placement="topLeft">
          <template #title>
            <span>下载代码</span>
          </template>
          <i><DownloadOutlined /></i> 下载代码
        </a-tooltip>
      </li>
    </ul>
  </div>
  <a-drawer
    class="show-json"
    placement="left"
    :visible="visible"
    @close="onClose"
    size="large"
    destroy-on-close
  >
    <JSONEditor :visible="visible" @close="onClose"></JSONEditor>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
  ClusterOutlined,
  SaveOutlined,
  CodepenOutlined,
  DownloadOutlined,
  InsertRowLeftOutlined,
} from "@ant-design/icons-vue";
import JSONEditor from "./components/JSONEditor/index.vue";
import { useLayout } from "@/stores/datav/layout";
import { ILayout } from "@/stores/datav/types";
const layout: ILayout = useLayout();

const changeComponent = () => {
  if (layout.showLayer && !layout.showComponent) {
    layout.showLayer = false;
  }
  layout.showComponent = !layout.showComponent;
};

const changeLayer = () => {
  if (layout.showComponent && !layout.showLayer) {
    layout.showComponent = false;
  }
  layout.showLayer = !layout.showLayer;
};

const save = () => {
  console.log("保存");
};

const downloadCode = () => {
  console.log("下载代码");
};
const visible = ref<boolean>(false);
const getJSON = () => {
  visible.value = true;
  console.log("获取json");
};
const onClose = () => {
  visible.value = false;
};
</script>

<style lang="less" scoped>
.view-header {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .view-header-l-tool,
  .view-header-r-tool {
    list-style: none;
    height: 100%;
    padding: 0;
    display: flex;
    margin-bottom: 0;
    & > li {
      -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Chrome/Safari/Opera */
      -khtml-user-select: none; /* Konqueror */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
      user-select: none; /* Non-prefixed version, currently not supported by any browser */
      list-style: none;
      padding: 0 10px;
      height: 100%;

      color: @white;

      /deep/ span {
        height: 100%;
        display: flex;
        align-items: center;
        & > i {
          margin-right: 8px;
        }
      }
    }
    & > li:hover {
      cursor: pointer;
      background-color: fade(@primary-color, 10%);
    }
    & > li.action {
      background-color: fade(@primary-color, 50%);
    }
  }
}
</style>
